<template>
  <div class="all">
    <div class="seat">
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.id + item.time"
        placement="top-start"
        v-for="(item, index) in tableList.slice(0, 6)"
        :key="index"
      >
        <el-button
          :type="item.type"
          icon="el-icon-notebook-1"
          size="mini"
          circle
          plain
          :disabled="item.disable"
          @click="selectSeat(index + 1)"
        ></el-button>
      </el-tooltip>
    </div>
    <div class="table"></div>
    <div class="seat">
      <el-tooltip
        class="item"
        effect="dark"
        :content="item.id + item.time"
        placement="top-start"
        v-for="(item, index) in tableList.slice(6, 12)"
        :key="index"
      >
        <el-button
          :type="item.type"
          icon="el-icon-notebook-1"
          size="mini"
          circle
          plain
          :disabled="item.disable"
          @click="selectSeat1(index1 + 7)"
        ></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<style scoped>
.all {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 0.2rem;
}
.el-button + .el-button {
  margin: 0;
  margin-top: 0.2rem;
}
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.table {
  width: 1.5rem;
  height: 4.7rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 0 0.3rem;
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}

.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

.item {
  margin: 4px;
}

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
</style>


<script>
import { post, get } from "@/utils/request";

export default {
  name: "seat",
  data() {
    return {
      radio2: "",

      tableTimeList: [],
      tableList: [
        { id: "1", time: "", type: "primary", disable: false },
        { id: "2", time: "", type: "primary", disable: false },
        { id: "3", time: "", type: "primary", disable: false },
        { id: "4", time: "", type: "primary", disable: false },
        { id: "5", time: "", type: "primary", disable: false },
        { id: "6", time: "", type: "primary", disable: false },
        { id: "7", time: "", type: "primary", disable: false },
        { id: "8", time: "", type: "primary", disable: false },
        { id: "9", time: "", type: "primary", disable: false },
        { id: "10", time: "", type: "primary", disable: false },
        { id: "11", time: "", type: "primary", disable: false },
        { id: "12", time: "", type: "primary", disable: false }
      ]
    };
  },
  props: ["floor", "Qu", "Date", "startTime", "endTime"],
  methods: {
    selectSeat(value) {
      console.log(value);
      this.$emit("selectSeatValue", value);
    },
    selectSeat1(value) {
      this.$emit("selectSeatValue", value);
    },
    judgeTime(stime, etime, table) {
      let star = stime.split("", 1);
      let end = etime.split("", 1);
      var odertime = [];
      for (let i = 0; i < table.length; i++) {
        odertime = table[i].odertime.split("");
        var sStart = odertime[0];
        var sEnd = odertime[7];
        if (star > sStart && star < sEnd && end > sStart && end < sEnd) {
          return;
        } else {
          this.tableList[table[i].oderseat].type = "danger";
          this.tableList[table[i].oderseat].disable = true;
        }
      }
    },
    async getBookInfo() {
      let url = "http://120.77.41.127:8080/bookInfo/query";
      let data = await get(url);
      this.bookInfo = data.data;
      console.log(this.bookInfo);
      for (let i = 0; i < this.bookInfo.length; i++) {
        console.log(this.startTime);
        if (
          this.bookInfo[i].oderdate == this.Date &&
          this.bookInfo[i].oderfloor == this.floor &&
          this.bookInfo[i].oderqu == this.Qu
        ) {
          console.log("pipei");
          this.tableTimeList.push(this.bookInfo[i]);
          this.judgeTime(this.startTime, this.endTime, this.tableTimeList);
        }
      }
    }
  }
};
</script>